<template>
  <div class="lix-schl">
    <Abnor v-if="noData" type="DATA" />
    <!-- 常规列表 -->
    <div class="lix-schl__list">
      <div class="lix-schl__item" v-for="(item, idx) in list" :key="idx" :data-id="item.id" @click="itemClick">
        <image :src="item.cover" />
        <div class="info">
          <p class="title zan-ellipsis">{{ item.name }}</p>
          <p class="author">地址：{{ item.region }}{{ item.address_detail }}</p>
          <div class="weui-rate-wrap lix-schl__rate">
            <ul class="weui-rate">
              <li class="weui-rate-item" v-for="(n, index) in max" :key="index" :class="{'weui-rate-item-active' : index <= item.grade}" :data-index='index'>
                <div class="weui-rate-item-def"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <ZanLoadmore :loading="loading" :nomore="! hasNextPage" v-if="!noData"/>
  </div>
</template>

<script>
import { SCHOOL_GET_LIST } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import ZanLoadmore from '../../../node_modules/mpvue-zanui/src/components/zan/loadmore';
import Abnor from '@/components/abnor/abnor';

export default {
  components: {
    ZanLoadmore,
    Abnor
  },
  computed: {
    ...mapGetters('schoolList', {
      list: 'list',
      loading: 'loading',
      hasNextPage: 'hasNextPage',
      noData: 'noData',
      currentPage: 'currentPage'
    }),
    ...mapGetters('city', {
      defaultCounty: 'defaultCounty',
      currentCityCode: 'currentCityCode',
      code: 'code'
    })
  },
  watch: {
    currentCityCode: function(newValue, oldValue) {
      this.destroyedState();
      this.areaCode = newValue;
      console.log('学校列表页面属性变动');
      console.log(newValue);
      console.log(oldValue);
      this.getListData({
        page: 1,
        params: {},
        code: this.areaCode
      });
    },
    code: function(newValue, oldValue) {
      this.destroyedState();
      this.areaCode = newValue;
      console.log('学校列表页面属性变动');
      console.log(newValue);
      console.log(oldValue);
      this.getListData({
        page: 1,
        params: {},
        code: this.areaCode
      });
    }
  },
  data() {
    return {
      max: 5,
      tempValue: 3,
      areaCode: ''
    };
  },
  onLoad() {
    this.destroyedState();
    // 在有地域code的时候，增加地级市编码参数
    let code = '';
    if (this.areaCode.length > 0) {
      code = this.areaCode;
    }
    this.getListData({
      page: 1,
      params: {},
      code: code
    }).then(a => {
      console.log('------->', this.list);
      console.log(this.$store);
    });
  },
  onUnload() {
    console.log('页面卸载');
    this.destroyedState();
  },
  onReachBottom() {
    // 在有地域code的时候，增加地级市编码参数
    let code = '';
    if (this.areaCode.length > 0) {
      code = this.areaCode;
    }
    if (this.hasNextPage) {
      this.getListData({
        page: this.currentPage + 1,
        code: code
      });
    }
  },
  methods: {
    ...mapActions('schoolList', {
      'getListData': SCHOOL_GET_LIST,
      'destroyedState': 'destroyedState'
    }),
    selectRate(e) {
      this.tempValue = e.mp.currentTarget.dataset.index;
      this.rateScore = this.rateScoreDesc[this.tempValue];
    },
    itemClick(e) {
      console.log(e);
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/school?id=' + id
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/schoolList.scss";
</style>